<template>
    <div>
        <div class="xx-table-container" style="">
            <div class="xx-flex-row" v-if="showDefalutTools">
                <div >
                    <el-button type="primary" size="mini" round @click="dialogFormVisible = true;dialogFormTitle='新增一行'">新增</el-button>
                </div>
                <div >
                    <div style="width:300px;margin-left:10px;">
                        <el-input  placeholder="请输入内容" v-model="select_input" class="input-with-select" size="mini">
                        <el-select v-model="select" slot="prepend" placeholder="请选择" style="width:100px;">
                            <el-option v-for="(item,i) in tableData.header" :label="item.label" :value="item.prop" v-bind:key="i"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search" @click="$emit('search',select,select_input)"></el-button>
                        </el-input>
                    </div>
                </div>
            </div>
            <div style="margin-bottom:10px;">
                <el-table
                    :show-header='showHeader'
                    stripe
                    :data="tableData.data"
                    >
                    <el-table-column v-if="showDefalutExpand" type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <div v-for="(item,i) in props.row" v-bind:key="i">
                                    <el-form-item :label="i">
                                        <span>{{ item }}</span>
                                    </el-form-item>
                                </div>
                            </el-form>
                        </template>
                    </el-table-column>

                    <el-table-column v-for="(item, index) in tableData.header"
                       :key="index"
                       :width="item.width"
                       :label="item.label">
                    <template slot-scope="scope">
                        <!-- 未定义，默认直接显示 -->
                        <div v-if="!item.type">
                            {{scope.row[item.prop]}}
                        </div>
                        <!-- html代码模式 -->
                        <div v-else-if="item.type == 'html'">
                            <div v-html="scope.row[item.prop]"></div>
                        </div>
                        <!-- tag模式 -->
                        <div v-else-if="item.type.split('|')[0] == 'tag'">
                            <el-tag :type="item.type.split('|')[1]">{{scope.row[item.prop]}}</el-tag>
                        </div>
                        <!-- switch模式 -->
                        <div v-else-if="item.type.split('|')[0] == 'switch'">
                            <el-switch v-model="scope.row[item.prop]" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                        </div>
                        <!-- 具名插槽模式 -->
                        <div v-else-if="item.type == 'no-editslot' || item.type == 'editslot'">
                            <slot :name="item.prop" v-bind:item="scope.row" v-bind:index="scope.$index"></slot>
                        </div>

                    </template>
                    </el-table-column>

                    <el-table-column
                    fixed="right"
                    label="操作"
                    v-if="showDefalutButton"
                    >
                    <template slot-scope="scope">
                        <el-button
                        @click.native.prevent="edit_id = scope.$index;form = JSON.parse(JSON.stringify(scope.row)) ;dialogFormVisible = true;dialogFormTitle='编辑当前行'"
                        type="text"
                        size="small">
                        编辑
                        </el-button>
                        <el-button
                        @click.native.prevent="deleteRow(scope.$index, tableData.data)"
                        type="text"
                        size="small">
                        删除
                        </el-button>
                    </template>
                    </el-table-column>
                </el-table>
                <div v-if="showDefalutPagination" style="text-align:center; padding:10px;">
                    <el-pagination
                    background
                    @current-change="$emit('current-change', $event)"
                    layout="prev, pager, next"
                    :page-count="tableData.pages">
                    </el-pagination>
                </div>
            </div>

        </div>
        <!-- Form -->
        <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible">
        <el-form>
            <div  v-for="(item,i) in tableData.header" v-bind:key="i" >
                <!-- v-if="!(item.type == 'slot')" -->
                <el-form-item v-if="!(item.type == 'no-editslot')" :label="item.label+'：'" style="text-align: left;">
                    <!-- 未定义，默认直接显示 -->
                    <div v-if="!item.type">
                        <el-input v-model="form[item.prop]" auto-complete="off"></el-input>
                    </div>
                    <!-- html代码模式 -->
                    <div v-else-if="item.type == 'html'">
                        <el-input v-model="form[item.prop]" auto-complete="off"></el-input>
                    </div>
                    <!-- tag模式 -->
                    <div v-else-if="item.type.split('|')[0] == 'tag'">
                        <el-input v-model="form[item.prop]" auto-complete="off"></el-input>
                    </div>
                    <!-- switch模式 -->
                    <div v-else-if="item.type.split('|')[0] == 'switch'">
                        <el-switch v-model="form[item.prop]" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                    </div>
                    <!-- 编辑具名插槽模式 -->
                    <div v-else-if="item.type == 'editslot'">
                        <slot :name="item.prop+'_edit'" v-bind:item="item.prop"></slot>
                    </div>
                </el-form-item>
            </div>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormSubmit">确 定</el-button>
        </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'xx-table',
    props: {
        tableData: {
            type: Object,
            default: () => { return { pages: 1, header: [], data: [] } }
        },
        showDefalutButton: {
            type: Boolean,
            default: true
        },
        showDefalutTools: {
            type: Boolean,
            default: true
        },
        showDefalutPagination: {
            type: Boolean,
            default: true
        },
        showDefalutExpand: {
            type: Boolean,
            default: true
        },
        showHeader: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            dialogFormTitle: '',
            dialogFormVisible: false,
            form: {},
            select: '',
            select_input: '',
            edit_id: ''
        }
    },
    methods: {
        dialogFormSubmit() {
            switch (this.dialogFormTitle) {
            case '新增一行':
                this.$emit('add', this.form, (status, message) => {
                    if (status) {
                        this.dialogFormVisible = false
                        this.tableData.data.unshift(JSON.parse(JSON.stringify(this.form)))
                        this.$message({
                            message: message,
                            type: 'success'
                        })
                    } else {
                        this.$message.error({
                            message: message
                        })
                    }
                })
                break
            case '编辑当前行':
                this.$emit('edit', this.tableData.data[this.edit_id], this.form, this.edit_id, (status, message) => {
                    if (status) {
                        this.dialogFormVisible = false
                        this.$set(this.tableData.data, this.edit_id, JSON.parse(JSON.stringify(this.form)))
                        this.$message({
                            message: message,
                            type: 'success'
                        })
                    } else {
                        this.$message.error({
                            message: message
                        })
                    }
                })
                break
            default:
                break
            }
        },
        deleteRow(index, rows) {
            this.$emit('rowDelete', this.tableData.data[index], index, (status, message) => {
                if (status) {
                    rows.splice(index, 1)
                    this.$message({
                        message: message,
                        type: 'success'
                    })
                } else {
                    this.$message.error({
                        message: message
                    })
                }
            })
        }
    },
    mounted() {

    }
}
</script>

<style scoped>
    .xx-table-container{
        text-align:left;
        margin-top:10px;
    }
    .xx-flex-row{
        display: flex;
        flex-direction: row;
    }
    h1{
        padding: 0px;
        margin: 0px;
    }
    .demo-table-expand {
    font-size: 0;
  }
    .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
    .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>
